<template>
    <div class="container">
        <p class="tips"><i class="point-icon"></i><span>展示当前的实时销售动态，如果买家是通过搜索关键词找到素材并下载的会展示搜索词</span></p>
        <div class="pos-b banner-wap1 ww1">
            <div class="auto pic-list-wap">
                <div class="list-wap  material-wap-pub">
                    <dl v-for="(item,index) in videoList" :key="index">
                        <dt  @click="goDetail(item.videoId)">
                            <div class="list-top pos-b ww1">
                                <p class="flex" space-be="">
                                    <span>{{item.fileName}}</span>
                                    <!-- <i style="margin-right: 15px;">{{item.individualPrice}}￥</i> -->
                                </p>
                                <!-- {{item.resolutionRatio}} -->
                            </div>
                            <div class="list-center">

                                <img :src="fileUrl + item.filesImg1" alt="" >

                                <video  autoplay width="100%" :src="fileUrl + item.fileUrl" :key="item.fileUrl" muted class="hide" preload="auto" loop="loop">
                                </video>
                            </div>
                            <div class="material-info pos-b ww1">
                                <div class="left">{{item.downloadRate }}下载</div>
                                <div class="fz-r" style="margin-right: 15px;">{{$formatDuring(item.fileSometimes)}}</div>
                            </div>
                        </dt>
                        <dt class="message">
                            <div>
                                <p>个人授权</p>
                                <p>程**</p>
                            </div>
                            <div>
                                <p>2021-10-12 09:12:32</p>
                                <p>关键词：航拍中国</p>
                                <p>成交价：56元</p>
                            </div>
                        </dt>
                    </dl>
                </div>
            </div>
        </div>
        <!-- <div flex ww1 style="justify-content: center; margin-top: 50px;">
            <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total" @current-change="currentChange">
            </el-pagination>
        </div> -->
    </div>
</template>
<script>
import $http from "@/api/info/videoUpload"
import $ from 'jquery'
export default {
    data() {
        return {
            fileUrl: this.$url.fileUrl,
            videoList: [],
            total: 10,
            pageSize: 20,
            pageNum: 1
        }
    }, 
    mounted() {
        this.getVideoList();
    },
    methods: {
        /**
         * 获取视频列表
         */
        getVideoList() {
            let data = {
                //"userId": sessionStorage.getItem('userId'),
                //"aisleAuthorization": "",
                "categoryIds": this.categoryIds,
                "title": this.state
            };
            let page = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
            }
            $http.getVideoList(page, data).then((res) => {
                console.log(res);
                this.videoList = res.rows;
                this.total = res.total;
                setTimeout(() => {
                    $('.material-wap dl, .list-wap dl').each(function () {
                        $(this).hover(function () {
                            $(this).find('dt video').removeClass('hide')
                            $(this).find('.list-center img').addClass('hide')
                        },function () {
                            $(this).find('dt video').addClass('hide')
                            $(this).find('.list-center img').removeClass('hide')
                        })
                    })
                }, 1000)
            })
        },
    }
}
</script>
<style scoped>
    .message {
        color: #777;
        margin-left: 10px;
        padding: 10px 0;
    }
    .message>div {
        line-height: 20px;
    }
    .message>div:last-child {
        margin-top: 45px;
    }
    .container {
        width: 1180px;
        padding: 10px;
        height: 100%;
        margin: 0 auto;
        border-radius: 5px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);;
    }
    .tips {
        padding: 20px 0 30px 0;
        font-size: 14px;
    }
    .point-icon {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 10px;
        background: #1bd8b8;
        margin-right: 5px;
    }


    /**视频样式 */
    .pos-b.banner-wap1.ww1 {
        position: relative;
        top: 0;
        width: auto;
    }



    .nav-third{
        top:100%; background: var(--chilid-nav-bg);
        left: 0;
        padding: 1% 0; display: none;
        z-index: 1;
    }
    .nav-third-wap dl{
        display: none;
    }
    .nav-third-wap dt{}

    .arrow:after {
        content: "";
        display: inline-block;
        border: 10px solid transparent;
        border-top-width: 0;
        border-bottom-color: #fff;
    }
    .arrow{
        -webkit-transition: all .3s;
        transition: all .3s;
        bottom: -15px;
        width: 10px;

    }

    .nav-third-wap a:hover, .red a:hover, .red-cont:hover, .c-red{
    /* background: #f6f9fc;*/
        color: var(--nav-hover-red);
    }
    .nav-third-wap a{
        color: var(--color-black); padding: 0 2%; margin: 0;
    }


    .nav-third-wap{
        width: 95%;
    }

    [space-be]{
        justify-content: space-between;
        -webkit-justify-content: space-between;
    }

    [space-arrow]{
        justify-content: space-around;
        -webkit-justify-content: space-around;
    }

    .head-search{
        border: 1px solid #6f6f6f;
        background: #f5f5f5;
        border-right: none;
        height: 38px; line-height: 38px;
        flex: 1;
        margin-right: 12px;

    }
    .head-search input{
        border: none;
        outline: none;
        background: none;
        flex: 1;
        color: var(--nav-color);
        text-indent: 2%;
    }
    [transition]{
        -webkit-transition: all .5s;
        transition: all .5s;
    }
    .tag-box{

    }
    .tag-box dt{
        margin-right: 20px;
    }
    .tag-box dd{
        background: var(--search-btn-color);
        padding: 0 12px;
        border: 1px solid  var(--search-btn-color);
    }
    .tag-wap{
        color: var(--color-black);
        font-size: var(--chilid-nav-bg);
        padding: 0 10px;
        text-transform: uppercase;
    }
    .shop-num{
        background:red;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        line-height: 20px;
        text-align: center;
        font-size: 11px;
        color: #fff;
        left: 15px;
        top: 8px;
    }
    .shop-num.no-num{
        background: var(--grey);
    }

    /*缩略图*/
    .material-wap-pub{
        display: flex;
        display: -ms-flex ;
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        width:1200px;
        margin: auto;
    }


    .material-wap-pub dl{
        -webkit-transform: translateY(0);
        -webkit-transition: all .5s;
        transition: all .5s;
        flex: 0 0 50%;
        width: 50%;
        margin-bottom: 15px;
        cursor: pointer;
        overflow: hidden;

    }
    .material-wap-pub dt, .material-wap-pub dd{
        width: 285px;
        height: 160px;
        display: inline-block;
        vertical-align: top;
        overflow: hidden;
    }
    .material-wap-pub dl:hover{
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
    }

    .material-wap-pub dl img{
        width: 100%; height: 100%;
        opacity: .9;
        object-fit: fill;
    }
    .material-wap-pub a{
        display: block;width: 100%;overflow: hidden;
        height: 100%;
    }
    .flex{
        display: flex;
        display: -ms-flex ;
    }
    .align-c{
        -webkit-align-items: center; align-items: center;
    }

    .raduis:before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 10px
    ;
    }
    .swiper-wrapper{
        overflow: hidden;
    }

    .hide{
        display: none;
    }
    .green{
        background-color: #02d4b1; border-radius: 4px;
    }

    .nav-left .pos-b{
        height: 2px;
        width: auto;
        background: #fff;
        top: 95%;
        left: 0;
        transition: all .3s;
        -webkit-transition: all .3s;
    }
    .left-wap1.nav-left   .pos-b{
        background: #010200;
    }
    .links a{
        padding-top: 2%;
        color: var(--color-black);
        font-size: var(--content);
        margin-right: 12px;
        padding-bottom: 6%;
    }

    .material-wap dl, .list-wap dl{
        overflow: hidden;
        font-size: var(--small);
    }
    .list-wap video{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .list-top, .material-info{
        padding: 0 2%;

    }
    .list-top p span{
        width: 80%;
        flex: 0 0 80%;
    }

    .material-wap-pub dl:hover  .list-top{
        transform: translateY(6px);
        -webkit-transition: all .3s;
        transition: all .3s;
        z-index: 1;
    }

    .list-top{
        top:0px; left: 0;transform: translateY(-100%);
        z-index: -1; line-height:20px;
        width: 250px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap
    }
    .list-wap dd{
        bottom: 12px;
    }

    .list-top, .material-info{
        text-shadow: 0px 2px 2px rgb(56 50 50 / 70%);
    }

    .list-top , .list-wap dd a, .material-info{
        color: var(--small-color);
    }

    .list-top p{
        align-items: center;
    }

    .list-wap dd a{

        display: flex;
        display: -moz-flex;
        display: -ms-flex;

    }
    .material-wap dl a {
        height: 160px;
    }
    .list-wap dl a  {
        height: 160px;
    }
    .material-info{
        bottom: 4px;
        justify-content: space-between;
    }
    .material-info>div {
        display: inline-block;
    }
    .material-info>div:last-child {
        margin-left: 190px;
    }
</style>